<template>
  <el-popover v-model="visibility" placement="bottom" trigger="click">
    <!-- 静态数据 select -->
    <SelectComp
      ref="selectBox"
      v-model="list"
      :lists="col.select"
      :key-label="col.selectLabel"
      :key-value="col.selectValue"
      :select-remote="col.selectRemote"
      :select-options="col.selectOptions"
      :multiple="col.multiple"
      :min="col.min"
      :max="col.max"
      @changeSearch="changeSearch"
    />
    <div slot="reference">
      {{ col.label }}
      <i class="el-icon-arrow-down" />
    </div>
  </el-popover>
</template>
<script>
import SelectComp from './select.vue';
import { checkIsEmpty } from '@/utils/common';
export default {
  components: { SelectComp },
  props: {
    col: {
      type: Object,
      default: () => {
        return {};
      },
    },
    value: {
      type: String,
      default: '',
    },
    isparams: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visibility: false,
      list: '',
    };
  },
  watch: {
    value: {
      handler(v) {
        if (!checkIsEmpty(v)) {
          this.list = v;
        } else {
          this.list = '';
        }
      },
    },
  },
  methods: {
    changeSearch() {
      this.visibility = false;
      if (!this.isparams) {
        this.$emit('input', this.list);
      } else {
        try {
          this.$emit('input', JSON.parse(JSON.stringify(this.list)));
        } catch (error) {
          this.$emit('input', this.list);
        }
      }
      this.$emit('changeSearch');
    },
  },
};
</script>
<style lang="scss" scoped></style>
